<template>
    <div class="shop">
        <div class="base_header">
            <img @click="goBack()" class="back" src="../../assets/img/back.png" alt="">店铺详情
        </div>
        <div class="shop_title">
            <img src="../../assets/img/user/test-head.png" alt="" v-if="shopInfo.shopId==21">
            <img :src="imageDomain+shopInfo.image" alt="" v-else/>
            <div>
                <p>{{shopInfo.shopName}}</p>
                <p><img src="../../assets/img/shop/shop_star.png" alt="" v-for="star in shopInfo.level"></p>
            </div>
            <!--<span class="care">已关注</span>-->
        </div>
        <!--<ul class="check_menu horizontal-list clear">-->
        <!--<li @click="checkMenu(0)" :class="{active:menuIndex == 0}">店铺首页</li>-->
        <!--<li @click="checkMenu(1)" :class="{active:menuIndex == 1}">全部商品</li>-->
        <!--<li @click="checkMenu(2)" :class="{active:menuIndex == 2}">新品上架</li>-->
        <!--</ul>-->
        <!--店铺首页
        <div v-if="menuIndex==0" class="shop_index">
            <ul class="item_classify_goods horizontal-list clear">
                <p>金牌商品</p>
                <li v-for="good in topGoods">
                    <router-link :to="{path:'/detail',query:{productCode:good.productCode}}"><img
                            :src="imageDomain+good.image" alt="">
                        <p class="title">{{good.productName}}</p>
                        <p class="price">￥{{good.price}}</p></router-link>
                </li>

            </ul>
            <ul class="item_classify_goods horizontal-list clear">
                <p>热销商品</p>
                <li v-for="good in hotGoods">
                    <router-link :to="{path:'/detail',query:{productCode:good.productCode}}"><img
                            :src="imageDomain+good.image" alt="">
                        <p class="title">{{good.productName}}</p>
                        <p class="price">￥{{good.price}}</p></router-link>
                </li>
            </ul>
        </div>-->
        <!--全部商品-->
        <div class="all_goods">
            <ul class="goods_status horizontal-list clear">
                <li @click="checkStatus(0)" :class="{active:goodsStatus == 0}">综合</li>
                <li @click="checkStatus(1)" :class="{active:goodsStatus == 1}">销量</li>
                <li @click="checkStatus(2)" :class="{active:goodsStatus == 2}">新品</li>
                <li @click="checkStatus(3)" :class="{active:goodsStatus == 3}">价格</li>
            </ul>
            <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
                         @bottom-status-change="handleTopChange" ref="loadmore">
                <ul class="item_classify_goods1 horizontal-list clear">
                    <li v-for="good in goods">
                        <router-link :to="{path:'/detail',query:{productId:good.productId}}">
                            <img :src="imageDomain+good.image" alt="">
                            <p class="title">{{good.productName}}</p>
                            <p class="price">￥{{good.price}}</p>
                        </router-link>
                    </li>
                </ul>
            </mt-loadmore>
        </div>
        <!--新品上架
        <div v-if="menuIndex==2">
            <ul class="vertical-list new_goods">
                <li v-for="goods in newGoods">
                    <span class="time">{{goods.shelveDate}}</span>
                    <ul class="vertical-list">
                        <li v-for="item in goods.itemList">
                            <router-link :to="{path:'/detail',query:{productCode:item.productCode}}">
                                <img :src="imageDomain+item.goodsImg" alt="">
                                <p>{{item.goodsName}}</p>
                                <p class="price">￥{{item.price}}</p>
                            </router-link>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>-->
        <ul class="shop_f horizontal-list clear">
            <li>
                <router-link :to="{path:'/shop_classify',query:{shopId:shopInfo.shopId}}">商品分类</router-link>
            </li>
            <li>
                <router-link :to="{path:'/shop_info',query:{shopId:shopInfo.shopId}}">店铺简介</router-link>
            </li>
        </ul>
    </div>
</template>

<style>
    @import url("./shop.css");
</style>
<script>
    import {Toast} from 'mint-ui';
    import API from '../../assets/js/API'
    import Layer from '../../assets/js/MessageBox'

    export default {
        data() {
            return {
                shopId: this.$route.query.shopId,
                shopInfo: {},
                goods: [],
                imageDomain: "",
                menuIndex: 0,
                goodsStatus: 0,
                allLoaded: false,
                newGoods: [],
                currentPage:1
            }
        },
        created() {
             window.scrollTo(0,0);
            let shopDetailUrl = API.serviceDomain + API.shopIndex + "/" + this.shopId;
            this.$http.get(shopDetailUrl).then(
                (res) => {
                    if (res.body.status == '000000') {
                        this.shopInfo = res.body.data;
                    } else {
                        Layer.showMsg(res.body.message);
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
            let shopGoodsUrl = API.serviceDomain + API.shopGoods + "?currentPage="+this.currentPage+"&shopId=" + this.shopId + "&sortCol="+this.goodsStatus;;
            this.$http.get(shopGoodsUrl, this.goodsQuery).then(
                (res) => {
                    if (res.body.status == '000000') {
                        this.goods = res.body.data;
                    } else {
                        Layer.showMsg(res.body.message);
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
        },
        mounted() {
            this.imageDomain = API.imageDomain;
        },
        methods: {
            goBack() {
                this.$router.goBack()
            },
            checkMenu(index) {
                this.menuIndex = index;
            },
            checkStatus(status) {
                this.goodsStatus = status;
                this.currentPage = 1;
                this.getGoods();
            },
            getGoods() {
                let shopGoodsUrl = API.serviceDomain + API.shopGoods + "?currentPage="+this.currentPage+"&shopId=" + this.shopId + "&sortCol=" + this.goodsStatus;
                this.$http.get(shopGoodsUrl).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            this.goods = res.body.data;
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
            addRecord() {
                this.nextIndex();
                let shopGoodsUrl = API.serviceDomain + API.shopGoods + "?currentPage="+this.currentPage+"&shopId=" + this.shopId + "&sortCol=" + this.goodsStatus;
                this.$http.get(shopGoodsUrl).then(
                    (res) => {
                        if (res.body.status == '000000') {
                            if (res.body.data == null) {
                                this.allLoaded = true;// 若数据已全部获取完毕
                            } else {
                                this.goods = this.goods.concat(res.body.data);
                            }
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
            loadTop() {
                // 加载更多数据
                this.switch(this.goodsStatus + '');
                this.resetIndex();
                this.$refs.loadmore.onTopLoaded();
            },
            loadBottom() {
                // 加载更多数据
                this.addRecord();
                this.$refs.loadmore.onBottomLoaded();
            },
            handleTopChange(status) {
                this.topStatus = status;
            },
            nextIndex() {
                this.currentPage = this.currentPage + 1;
            },
            resetIndex() {
                this.goodsQuery = 1;
            }
        }
    }
</script>
